<template>
	<view class="container">
		<view class="count f-center">支付剩余时间
			<u-count-down :time="15 * 60 * 1000" format="mm:ss"></u-count-down>
		</view>
		<view class="price">{{params.price}}</view>
		<view class="mode f-c-between">
			<view class="f-a-center">
				<u-icon name="weixin-fill" color="#00C800" size="28"></u-icon>
				<span class="title">微信</span>
			</view>
			<image src="/static/home/icon-selected.png" class="icon-selected"></image>
		</view>
		<button class="btn-sure" @click="btnSurePay">确定支付</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromType: 'order',
				params: {
					price: '',
					addressId: null,
					mark: ''
				}
			}
		},
		onLoad(params) {
			if (params.from == 'app') {
				this.fromType = params.from
				this.params.price = params.price
				this.payCreatedOrder(params)
			} else {
				this.params = params
			}
		},
		methods: {
			//确定支付
			btnSurePay() {
				this.$u.debounce(() => {
					this.$store.dispatch('ac_submit_submitOrder', {
						address_id: this.params.addressId,
						mark: this.params.mark
					}).then(data => {
						// #ifdef MP-WEIXIN
						this.$util.payUtil(data).then(res => {
							uni.navigateTo({
								url: '/pages/cart/payResult'
							})
						}).catch(err => {
							uni.switchTab({
								url: '/pages/mine/index'
							})
						})
						// #endif

						// #ifdef APP
						this.navigatorWxPay(data)
						// #endif

					})
				}, 300)
			},

			//支付已经创建了的订单
			payCreatedOrder(params) {
				this.$api.pay_order({
					order_id: params.orderId,
					// #ifdef MP-WEIXIN
					client_type: 'Wechat'
					// #endif
					// #ifdef APP
					client_type: ' APP'
					// #endif
				}).then(data => {
					this.$util.payUtil(data).then(res => {
						uni.navigateTo({
							url: '/pages/cart/payResult?fromType=' + this.fromType
						})
					})
				})
			},

			//跳转到微信小程序
			navigatorWxPay(data) {
				let params = {
					from: 'app',
					orderId: data.id,
					price: this.params.price,
					token: this.token,
					pageType: 'orderPay'
				}
				this.$util.navigatorWxProgramUtil(params)
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F7F7;
	}
</style>
<style lang="scss" scoped>
	.count {
		font-weight: 400;
		// font-size: 24rpx;
		font-size: calc(24rpx * 1.4);
		color: #676767;
		padding-top: 126rpx;

		/deep/.u-count-down__text {
			font-weight: 400;
			// font-size: 24rpx;
			font-size: calc(24rpx * 1.4);
			color: #676767;
		}
	}

	.price {
		font-weight: 400;
		font-size: 56rpx;
		color: #EC673F;
		margin-top: 26rpx;
		text-align: center;
		position: relative;

		&:before {
			content: '¥';
			font-weight: 400;
			font-size: 32rpx;
			color: #EC673F;
		}
	}

	.mode {
		margin: 100rpx 16rpx 0;
		background: #FFFFFF;
		box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.11);
		border-radius: 16rpx;
		padding: 30rpx;

		.title {
			font-weight: 400;
			// font-size: 26rpx;
			font-size: calc(26rpx * 1.4);
			color: #333333;
			margin-left: 18rpx;
		}

		.icon-selected {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.btn-sure {
		height: 76rpx;
		line-height: 76rpx;
		background: #FFC046;
		border-radius: 38rpx;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		margin: 218rpx 32rpx 0;
	}
</style>